<template>
  <div>
    <div v-if="!showSingle" class="grid-content">
      <el-tabs v-model="activeName" class="leftTabs">
        <el-tab-pane label="我的参赛队" name="first">
          <div style="margin: 0 15px;">
            <el-button type="primary" @click="newGroup">+新建参赛队</el-button>
          </div>
          <div style="padding: 20px">
            <el-row :gutter="20">
              <el-col v-for="(g,index) in dataList" :key="index" :span="8">
                <div class="matchItem">
                  <div class="flex">
                    <div class="leftImg" v-if="g.imgUrl">
                      <img :src="g.imgUrl" mode="aspectFill">
                    </div>
                    <div class="rightWen">
                      <div class="name">{{ g.name }}</div>
                      <div class="pp">联系人：
                        {{ g.contactPerson }}
                      </div>
                      <div class="pp">类型：{{g.typeStr}}
                      </div>
                    </div>
                  </div>
                  <div class="bottomFunc">
                    <div class="textButtom" @click="viewSingle(g)">查看</div>
                    <span class="greenline">|</span>
                    <div class="textButtom" @click="del(g)">删除</div>
                  </div>
                </div>
              </el-col>
            </el-row>

            <el-empty v-if="dataList.length==0" description="还没有参赛队，点击新建参赛队立即创建吧~" />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div v-if="showSingle" class="teamSingle">
      <div class="head">
        <span @click="showSingle=false">
          <el-icon>
            <ArrowLeft />
          </el-icon>
          返回列表
        </span>

        <div class="fr">
          <el-button type="text" @click="editThisTeam">修改</el-button>
        </div>
      </div>
      <div class="team-body">
        <div style="padding: 0 20px;">
          <el-descriptions border>
            <el-descriptions-item label="logo">
              <img width="100" :src="baseFormData.imgUrl"/>
            </el-descriptions-item>
            <el-descriptions-item label="参赛队名称">
              {{ baseFormData.name }}
            </el-descriptions-item>
            <el-descriptions-item label="参赛队简称">
              {{ baseFormData.abreviations }}
            </el-descriptions-item>
            <el-descriptions-item label="参赛队类型">
              <span>{{baseFormData.typeStr}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="联系人">
              {{ baseFormData.contactPerson }}
            </el-descriptions-item>
            <el-descriptions-item label="联系方式">
              {{ baseFormData.contactTelno }}
            </el-descriptions-item>
            <el-descriptions-item label="参赛队名称">
              {{ baseFormData.name }}
            </el-descriptions-item>
            <el-descriptions-item label="所在地区">
              {{ baseFormData.regionStr }}
            </el-descriptions-item>
            <el-descriptions-item label="详细地址">
              {{ baseFormData.address }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <el-divider />

        <h3 style="padding: 0 20px;">人员管理
          <div class="fr">
            <el-button type="danger" @click="addMember">+添加人员</el-button>
          </div>
        </h3>
        <div class="memberList">
          <ul>
            <li
              v-for="(k,index) in kindList" :key="index" :class="current==index?'active':''"
              @click="changeKind(index)"
            >{{ k }}
            </li>
          </ul>


          <el-row :gutter="20">
            <el-col v-for="(p, index) in memberList" :key="index" :span="8">
              <div class="matchItem">
                <div class="flex m-height">
                  <div class="leftImg" v-if="p.picUrl"><img class="roundImg" :src="p.picUrl" mode="aspectFill"></div>
                  <div class="rightWen">
                    <div class="name" style="height: 22px;">
                      {{ p.realName }}
                      <span v-if="p.sex==0">（女）</span>
                      <span v-if="p.sex==1">（男）</span>
                    </div>
                    <div style="display: flex">
                      <div v-for="l in p.labelArr" :key="l" class="tag-view">
                        <el-tag v-if="l == '2'" type="warning">领队</el-tag>
                        <el-tag v-if="l == '1'" type="primary">教练</el-tag>
                        <el-tag v-if="l === '0'" type="success">运动员</el-tag>
                        <el-tag v-if="l == '4'" type="primary">队医</el-tag>
                        <el-tag v-if="l == '5'" type="warning">翻译</el-tag>
                        <el-tag v-if="l == '6'" type="error">官员</el-tag>
                        <el-tag v-if="l == '3'" type="info">其他</el-tag>
                      </div>
                    </div>

                    <div class="pp">
                      证件类型：
                      <span v-if="p.idcType == 0">居民身份证</span>
                      <span v-else-if="p.idcType == 1">护照</span>
                      <span v-else>其他</span>
                    </div>
                    <div class="pp">证件号：{{ p.idcCode.replace(/^(\d{6})\d{8}(.{4}$)/g, `$1${Array(9).join('*')}$2`) }}</div>
<!--                    <div class="pp">联系方式：{{ p.phone }}</div>-->
                  </div>
                </div>
                <div class="bottomFunc">
                  <div class="textButtom" @click="goEditCoach(p.id, groupId)">编辑</div>
                  <span class="greenline">|</span>
                  <div class="textButtom" @click="delperson(p)">删除</div>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-empty v-if="memberList.length==0" description="还没有成员" />
        </div>
      </div>
    </div>
    <!--    新建团队-->
    <dialogEditTeam ref="diaEditTeamRef" @submitForm="saveTeam" />

    <!--    添加人员-->
    <addCoach ref="dialogAddCoach" @submitForm="addCoachDone" />

  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { getCurrentInstance, onMounted } from '@vue/runtime-core'

const router = useRouter()
const { proxy } = getCurrentInstance()
import * as match from '@/api/match/pc'
import { ElMessage, ElMessageBox } from 'element-plus'
import dialogEditTeam from './component/teamInfo_form'
import addCoach from '../match/components/addCoach'

const kindList = ref(['运动员', '教练', '领队', '其他', '队医', '翻译', '官员'])
const typeList = ref([{ text: '学校', value: '0' }, { text: '场馆', value: '1' }, {
  text: '俱乐部',
  value: '2'
}, { text: '机构', value: '3' }])
const activeName = ref('first')
const current = ref(0)
const myform = ref({})
const showSingle = ref(false)
const baseFormData = ref({})
const groupId = ref('')

const regionsList = ref([])
const dataList = ref([])
const memberList = ref([])

onMounted(() => {
  getList()
  // getRegionsList()
})
function addMember() {
  const params = {
    title: '添加人员',
    id: 0,
    groupId: groupId.value
  }
  proxy.$refs['dialogAddCoach'].open(params)
}
function goEditCoach(id, groupId) {
  const params = {
    id: id,
    groupId: groupId
  }
  proxy.$refs['dialogAddCoach'].open(params)
}
function addCoachDone() {
  getInfo(groupId.value)
}

function getRegionsList() {
  match.regionsList().then(res => {
    regionsList.value = res.data
  })
}

function getList() {
  match.getMyGroupList().then(res => {
    dataList.value = res.data
  })
}

function newGroup() {
  proxy.$refs['diaEditTeamRef'].open({
    title: '新建参赛队'
  })
}

function editThisTeam() {
  proxy.$refs['diaEditTeamRef'].open({
    data: baseFormData.value,
    title: '编辑参赛队'
  })
}


function changeKind(n) {
  current.value = n
  switch (current.value) {
    case 0: {
      memberList.value = baseFormData.value.athletes
      getLabel(memberList.value)
      break
    }
    case 1: {
      memberList.value = baseFormData.value.coaches
      getLabel(memberList.value)
      break
    }
    case 2: {
      memberList.value = baseFormData.value.leaders
      getLabel(memberList.value)
      break
    }
    case 3: {
      memberList.value = baseFormData.value.others
      getLabel(memberList.value)
      break
    }
    case 4: {
      memberList.value = baseFormData.value.teamDoctors
      getLabel(memberList.value)
      break
    }
    case 5: {
      memberList.value = baseFormData.value.translators
      getLabel(memberList.value)
      break
    }
    case 6: {
      memberList.value = baseFormData.value.officials
      getLabel(memberList.value)
      break
    }
  }
}

function getLabel(list) {
  if (list.length > 0) {
    for (const m of list) {
      m.labelArr = m.label.split(',')
    }
  }
}

function viewSingle(n) {
  groupId.value = n.id
  showSingle.value = true
  getInfo(groupId.value)
}
function getInfo(id) {
  match.getGroupById(id).then(res => {
    baseFormData.value = res.data
    memberList.value = baseFormData.value.athletes
    getLabel(memberList.value)
  })
}
function saveTeam() {
  if (showSingle.value) {
    getInfo(groupId.value)
  } else {
    getList()
  }
}
function del(g) {
  // 删除团
  ElMessageBox.confirm('确定删除这个参赛队吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    match.deleteMyGroup(g.id).then(res => {
      ElMessage.success('操作成功')
      getList()
    })
  })
}
function delperson(p) {
  //删除团队下的人
  ElMessageBox.confirm(`确定删除${p.realName}吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    match.delPerson(p.id).then(res => {
      ElMessage.success('操作成功')
      getInfo(groupId.value)
    })
  })
}

</script>

<style scoped lang="scss">

@import '@/assets/styles/variables.module.scss';
.app-container {
  background: #F5F7F9;
}

.grid-content {
  background: #fff;
}

:deep(.el-tabs__nav-wrap) {
  padding: 0 15px;
}
.matchItem .m-height{
  height:170px ;
  overflow: hidden;
}
.matchItem .leftImg img{width: 100px;height: auto;border-radius: 4px;}
.memberList {
  ul {
    margin: 0 0 20px
  }
}
:deep(.el-descriptions__label.el-descriptions__cell.is-bordered-label){
  background: $--color-primary;
  color:#fff;
}
</style>
